<template>
  <!--绑定手机号-->
  <div>
    <wv-group class="phone">
      <wv-input label="绑定手机号：" placeholder="请输入手机号" type="number" v-model="mobile" :maxlength="11" pattern="/^((13|14|15|17|18)[0-9]{1}\d{8})$/" required/>
      <wv-input label="输入验证码：" placeholder="请输入验证码" v-model="code">
        <button class="weui-vcode-btn" slot="ft" :disabled="disabled" @click="getCode" ref="btn">
          <span v-show="show">获取验证码</span>
          <span v-show="!show" class="count">{{count}} s</span>
        </button>
      </wv-input>
    </wv-group>
    <p class="offer" @click="goChangePhone(mobile,code)">确认绑定</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {changePhone, getSmscode} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: 'changephone',
    props: {},
    data() {
      return {
        disabled: false,
        show: true,
        count: '',
        code: '',
        mobile: ''
      };
    },
    methods: {
      goChangePhone(mobile, smscode){
        let params = {mobile: mobile, smscode: smscode};
        changePhone(params).then(res => {
          console.log(res);
          if (res.code == 100) {

          } else {
            Toast.fail(res.info);
          }
        })
      },
      getSmsCode(params){
        getSmscode(params).then(res => {
          console.log(res);
        })
      },
      getCode(){
        const TIME_COUNT = 60;
        let params = {mobile: this.mobile, smsKey: 'hOWt3hiakXHrePCqDKUsPz5T6f7j8P'};
        this.getSmsCode(params);
        if (!this.timer) {
          this.$refs.btn.style.backgroundColor = '#c9e3fc';
          this.$refs.btn.style.border = 'none';
          this.disabled = true;
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              this.$refs.btn.style.backgroundColor = '#fff';
              this.$refs.btn.style.border = '1px solid #2f95f0';
              clearInterval(this.timer);
              this.timer = null;
              this.disabled = false;
            }
          }, 1000)
        }

      },
      showConfirm(){
        Toast.success('绑定成功')
      },
      nocode(){
        if (this.phone = '') {
          Toast({
            duration: 1000,
            message: '请输入手机号',
            icon: 'warn'
          })
        }
        if (!show) {
          Toast({
            duration: 1000,
            message: '请在60s以后再确认哦',
            icon: 'warn'
          })
        }
      }
    },
    created() {
      if (this.$route.params.label) {
        this.label = this.$route.params.label;
        this.placeholder = this.$route.params.placeholder
      }

    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  input::-webkit-input-placeholder {
    color: #999;
  }

  .weui-vcode-btn {
    color: #2f95f0;
    border: 1px solid #2f95f0;
    width: 110px;
  }

  .count {
    color: #fff;
  }

  .phone {
    text-align: left;
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
</style>
